<template>
  <div class="box">
      <span>*</span><strong>原密码:</strong><input type="password" v-model="old_password"/><br><br>
      <span>*</span><strong>新密码:</strong><input type="password" v-model="new_password"/><br><br>
      <span>*</span><strong>确认密码:</strong><input type="password" v-model="new_password2"/><br><br>
      <p>{{infor}}</p>
      <div class='btn'>
          <a-button type='primary' @click="sure">确定</a-button>
          <a-button @click="setting" >重置</a-button>
      </div>
  </div>
</template>

<script>
import {request} from '../api/index'
export default {
    name:'Modpsw',
    data(){
        return{
            old_password:"",
            new_password:"",
            new_password2:"",
            infor:""
        }
    },
    methods: {
        setting(){
            this.old_password=""
            this.new_password=""
            this.new_password2=""
            this.infor=""
        },
        sure(){
            if(this.new_password!=this.new_password2)
            {
                this.infor="两次输入密码不一致！";
            }
            else{
            request({method:'post',url:'/user/change_password',
                    data:{id:this.$store.state.login_id,password_old:this.old_password,
                    password_new:this.new_password}}).then((res)=>{
                        // console.log(res.data)
                        if(res.data.message=='success'){
                            alert("修改密码成功！");
                            this.$router.replace("/stuHome");
                        }
                        else{
                             this.infor="原密码错误！"
                        }
                    }).catch((err)=>{
                        // console.log(err)
                        this.infor="原密码错误！"
                    })
        }
    },

}}
</script>

<style lang='less' scoped>
.box{
   margin-left:30%;
   margin-top:30px;
    padding-top:60px;
    text-align: center;
    box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3);
    font-size: 16px;
    span{
        color: red;
    }
    p{
        color:red;
    }
    .btn{
            text-align: center;
           .ant-btn-primary {
               margin-right: 15px !important;

            }
    }
    }

</style>